<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description"
          content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="shortcut icon"
          href="assets/images/favicon_1.ico">

    <title>Moltran - Responsive Admin Dashboard Template</title>

    <link href="assets/plugins/modal-effect/css/component.css" rel="stylesheet">


    <link
            href="assets/css/bootstrap.min.css"
            rel="stylesheet" type="text/css">
    <link href="assets/css/core.css"
          rel="stylesheet" type="text/css">
    <link href="assets/css/icons.css"
          rel="stylesheet" type="text/css">
    <link
            href="assets/css/components.css"
            rel="stylesheet" type="text/css">
    <link href="assets/css/pages.css"
          rel="stylesheet" type="text/css">
    <link href="assets/css/menu.css"
          rel="stylesheet" type="text/css">
    <link
            href="assets/css/responsive.css"
            rel="stylesheet" type="text/css">

    <script
            src="assets/js/modernizr.min.js"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->


</head>


<body class="fixed-left">

<!-- Begin page -->
<div id="wrapper">

    <!-- Top Bar Start -->
    <div class="topbar">
        <!-- LOGO -->
        <div class="topbar-left">
            <div class="text-center">
                <a href="index.html" class="logo"><i class="md md-terrain"></i>
                    <span>运营后台 </span></a>
            </div>
        </div>
        <!-- Button mobile view to collapse sidebar menu -->
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="">
                    <div class="pull-left">
                        <button class="button-menu-mobile open-left">
                            <i class="fa fa-bars"></i>
                        </button>
                        <span class="clearfix"></span>
                    </div>
                    <form class="navbar-form pull-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control search-bar"
                                   placeholder="Type here for search...">
                        </div>
                        <button type="submit" class="btn btn-search">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>

                    <ul class="nav navbar-nav navbar-right pull-right">
                        <li class="dropdown hidden-xs"><a href="#" data-target="#"
                                                          class="dropdown-toggle waves-effect" data-toggle="dropdown"
                                                          aria-expanded="true"> <i class="md md-notifications"></i>
                            <span
                                    class="badge badge-xs badge-danger">3</span>
                        </a>
                            <ul class="dropdown-menu dropdown-menu-lg">
                                <li class="text-center notifi-title">Notification</li>
                                <li class="list-group">
                                    <!-- list item--> <a href="javascript:void(0);"
                                                         class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <em class="fa fa-user-plus fa-2x text-info"></em>
                                        </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">New user registered</div>
                                            <p class="m-0">
                                                <small>You have 10 unread messages</small>
                                            </p>
                                        </div>
                                    </div>
                                </a> <!-- list item--> <a href="javascript:void(0);"
                                                          class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <em class="fa fa-diamond fa-2x text-primary"></em>
                                        </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">New settings</div>
                                            <p class="m-0">
                                                <small>There are new settings available</small>
                                            </p>
                                        </div>
                                    </div>
                                </a> <!-- list item--> <a href="javascript:void(0);"
                                                          class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <em class="fa fa-bell-o fa-2x text-danger"></em>
                                        </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">Updates</div>
                                            <p class="m-0">
                                                <small>There are <span class="text-primary">2</span>
                                                    new updates available
                                                </small>
                                            </p>
                                        </div>
                                    </div>
                                </a> <!-- last list item --> <a href="javascript:void(0);"
                                                                class="list-group-item"> <small>See all
                                    notifications</small>
                                </a>
                                </li>
                            </ul>
                        </li>
                        <li class="hidden-xs"><a href="#" id="btn-fullscreen"
                                                 class="waves-effect"><i class="md md-crop-free"></i></a></li>
                        <li class="hidden-xs"><a href="#"
                                                 class="right-bar-toggle waves-effect"><i class="md md-chat"></i></a>
                        </li>
                        <li class="dropdown"><a href=""
                                                class="dropdown-toggle profile" data-toggle="dropdown"
                                                aria-expanded="true"><img
                                src="assets/images/users/avatar-1.jpg"
                                alt="user-img" class="img-circle"> </a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)"><i
                                        class="md md-face-unlock"></i> Profile</a></li>
                                <li><a href="javascript:void(0)"><i
                                        class="md md-settings"></i> Settings</a></li>
                                <li><a href="javascript:void(0)"><i class="md md-lock"></i>
                                    Lock screen</a></li>
                                <li><a href="javascript:void(0)"><i
                                        class="md md-settings-power"></i> Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <!-- Top Bar End -->


    <!-- ========== Left Sidebar Start ========== -->

    <div class="left side-menu">
        <div class="sidebar-inner slimscrollleft">
            <div class="user-details">
                <div class="pull-left">
                    <img
                            src="assets/images/users/avatar-1.jpg"
                            alt="" class="thumb-md img-circle">
                </div>
                <div class="user-info">
                    <div class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           aria-expanded="false">John Doe <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0)"><i
                                    class="md md-face-unlock"></i> Profile
                                <div class="ripple-wrapper"></div>
                            </a></li>
                            <li><a href="javascript:void(0)"><i
                                    class="md md-settings"></i> Settings</a></li>
                            <li><a href="javascript:void(0)"><i class="md md-lock"></i>
                                Lock screen</a></li>
                            <li><a href="javascript:void(0)"><i
                                    class="md md-settings-power"></i> Logout</a></li>
                        </ul>
                    </div>

                    <p class="text-muted m-0">Administrator</p>
                </div>
            </div>
            <!--- Divider -->
            <div id="sidebar-menu">
                <ul>
                    <li class="has_sub"><a href="#"
                                           class="waves-effect waves-light"><i
                            class="md md-now-widgets"></i><span>订单管理</span><span
                            class="pull-right"><i class="md md-add"></i></span></a>
                        <ul class="list-unstyled">
                            <li><a href="list">提交订单</a></li>
                            <li><a href="undev">待处理订单</a></li>
                            <li><a href="purchaseOrder">采购订单</a></li>
                            <li><a href="undev">零售订单列表</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#"
                                           class="waves-effect waves-light"><i
                            class="md md-now-widgets"></i><span>售后管理</span><span
                            class="pull-right"><i class="md md-add"></i></span></a>
                        <ul class="list-unstyled">
                            <li><a href="undev">申请退换货</a></li>
                            <li><a href="undev">退货订单列表</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#"
                                           class="waves-effect waves-light"><i
                            class="md md-now-widgets"></i><span>产品管理</span><span
                            class="pull-right"><i class="md md-add"></i></span></a>
                        <ul class="list-unstyled">
                            <li><a href="undev">产品信息查询</a></li>
                            <li><a href="undev">库存信息管理</a></li>
                        </ul>
                    </li>
                    <li class="has_sub"><a href="#"
                                           class="waves-effect waves-light"><i
                            class="md md-now-widgets"></i><span>会员信息</span><span
                            class="pull-right"><i class="md md-add"></i></span></a>
                        <ul class="list-unstyled">
                            <li><a href="undev">会员信息</a></li>
                            <li><a href="undev">修改秘密</a></li>
                            <li><a href="undev">账户信息</a></li>
                            <li><a href="undev">子账号管理</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- Left Sidebar End -->


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="content-page">
        <!-- Start content -->
        <div class="content">
            <div class="container">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="pull-left page-title">产品维护</h4>
                        <ol class="breadcrumb pull-right">
                            <li><a href="#">运营后台</a></li>
                            <li><a href="#">库存管理</a></li>
                            <li class="active">产品维护</li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">产品列表</h3>
                            </div>
                            <div class="panel-body">
                                <a type="button"
                                   class="btn btn-primary waves-effect waves-light m-b-5" th:href="@{/showAdd}">添加产品</a>
                                </a>
                            </div>
                            <div class="panel-body">
                                <form class="form-inline" role="form"
                                      th:action="@{/llpage}"
                                      method="post">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="pname"
                                               placeholder="产品名称" name="po.pname" th:value="${pvo.po.pname}">
                                    </div>
                                    <div class="form-group m-l-10">
                                        <input type="number" class="form-control"
                                               placeholder="开票价格大于" name="priceStart"
                                               th:value="${pvo.priceStart }"> <input type="number"
                                                                                     class="form-control"
                                                                                     placeholder="开票价格小于"
                                                                                     name="priceEnd"
                                                                                     th:value="${pvo.priceEnd }">
                                    </div>
                                    <button type="submit"
                                            class="btn btn-success waves-effect waves-light m-l-10">查询
                                    </button>
                                </form>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>产品编码</th>
                                                    <th>产品名称</th>
                                                    <th>产品型号</th>
                                                    <th>产品品类</th>
                                                    <th>产品数量</th>
                                                    <th>产品价格</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr th:each="p : ${page.list}">
                                                    <td>[(${p.id})]</td>
                                                    <td>[(${p.pcode })]</td>
                                                    <td>[(${p.pname })]</td>
                                                    <td>[(${p.ptype })]</td>
                                                    <td>[(${p.pcategory })]</td>
                                                    <td>[(${p.pnumber })]</td>
                                                    <td>[(${p.pprice })]</td>
                                                    <td>
                                                        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#custom-width-modal">删除
                                                        </button>
                                                        <a class="btn btn-default" type="button"
                                                           th:href="@{/preUpdate/}+${p.id}">编辑</a>
                                                        <!-- Modal模态框-->
                                                        <div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none">
                                                            <div class="modal-dialog" style="width:30%">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                        <h4 class="modal-title" id="custom-width-modalLabel">删除产品</h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <p>确认删除该产品吗</p>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                                                                        <button type="button" class="btn btn-primary waves-effect waves-light" onclick="del(this)">确认删除</button>
                                                                    </div>
                                                                </div><!-- /.modal-content -->
                                                            </div><!-- /.modal-dialog -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="dataTables_info" id="datatable-fixed-header_info"
                                             role="status" aria-live="polite">Showing 1 to <span
                                                th:text="${page.pages }"></span> of <span
                                                th:text="${page.total}"></span>
                                            entries
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="dataTables_paginate paging_simple_numbers"
                                             id="datatable-fixed-header_paginate"
                                             style="text-align: right;">
                                            <ul class="pagination">
                                                <li class="paginate_button previous"
                                                    aria-controls="datatable-fixed-header" tabindex="0"
                                                    id="datatable-fixed-header_previous"><a
                                                        th:href="@{/llpage(pageNum=${page.pageNum-1})}">Previous</a>
                                                </li>

                                                <li class="paginate_button"
                                                    aria-controls="datatable-fixed-header" tabindex="0"
                                                    th:each="i:${#numbers.sequence(1,page.pages)}"><a
                                                        th:href="@{/llpage(pageNum=${i})}">[(${i})]</a>
                                                </li>
                                                <li class="paginate_button next"
                                                    aria-controls="datatable-fixed-header" tabindex="0"
                                                    id="datatable-fixed-header_next"><a
                                                        th:href="@{/llpage(pageNum=${page.pageNum+1})}">Next</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End row -->

            </div>
            <!-- container -->


        </div>
        <!-- content -->

        <footer class="footer text-right"> 2015 © Moltran.</footer>

    </div>
    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->


    <!-- Right Sidebar -->
    <div class="side-bar right-bar nicescroll">
        <h4 class="text-center">Chat</h4>
        <div class="contact-list nicescroll">
            <ul class="list-group contacts-list">
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-1.jpg"
                                alt="">
                    </div>
                    <span class="name">Chadengle</span> <i
                        class="fa fa-circle online"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-2.jpg"
                                alt="">
                    </div>
                    <span class="name">Tomaslau</span> <i
                        class="fa fa-circle online"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-3.jpg"
                                alt="">
                    </div>
                    <span class="name">Stillnotdavid</span> <i
                        class="fa fa-circle online"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-4.jpg"
                                alt="">
                    </div>
                    <span class="name">Kurafire</span> <i
                        class="fa fa-circle online"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-5.jpg"
                                alt="">
                    </div>
                    <span class="name">Shahedk</span> <i class="fa fa-circle away"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-6.jpg"
                                alt="">
                    </div>
                    <span class="name">Adhamdannaway</span> <i
                        class="fa fa-circle away"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-7.jpg"
                                alt="">
                    </div>
                    <span class="name">Ok</span> <i class="fa fa-circle away"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-8.jpg"
                                alt="">
                    </div>
                    <span class="name">Arashasghari</span> <i
                        class="fa fa-circle offline"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-9.jpg"
                                alt="">
                    </div>
                    <span class="name">Joshaustin</span> <i
                        class="fa fa-circle offline"></i>
                </a> <span class="clearfix"></span></li>
                <li class="list-group-item"><a href="#">
                    <div class="avatar">
                        <img
                                src="assets/images/users/avatar-10.jpg"
                                alt="">
                    </div>
                    <span class="name">Sortino</span> <i
                        class="fa fa-circle offline"></i>
                </a> <span class="clearfix"></span></li>
            </ul>
        </div>
    </div>
    <!-- /Right-bar -->


</div>
<!-- END wrapper -->

<script>
    var resizefunc = [];
</script>

<!-- jQuery  -->
<script
        src="assets/js/jquery.min.js"></script>
<script
        src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script
        src="assets/js/fastclick.js"></script>
<script
        src="assets/js/jquery.slimscroll.js"></script>
<script
        src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script
        src="assets/js/jquery.nicescroll.js"></script>
<script
        src="assets/js/jquery.scrollTo.min.js"></script>

<script
        src="assets/js/jquery.app.js"></script>

<!-- Modal-Effect -->
<script src="assets/plugins/modal-effect/js/classie.js"></script>
<script src="assets/plugins/modal-effect/js/modalEffects.js"></script>

<script type="text/javascript" th:inline="javascript">

    $(document).ready(function () {
        var pageNum = [[${page.pageNum}]];

        var pageMax = [[${page.pages}]];
        if (pageNum == 1) {
            $("#datatable-fixed-header_previous").addClass('disabled');
        }

        if (pageNum == pageMax) {
            $("#datatable-fixed-header_next").addClass('disabled');
        }
        //设置分页效果
        var as = $(".pagination li a");
        $.each(as, function (i, n) {
            var num = $(this).text();
            if (num == pageNum) {
                $(this).parent().addClass('active');
            }
        })
    });

    function del(obj) {
        //ajax请求删除产品数据（局部刷新）
        var pid = $(obj).parent().parent().parent().parent().parent().parent().find("td:first").text();
        //alert(pid);
        $.get("/demo/del?id="+pid,
            function (data) {
                //模态框取消
                $('#custom-width-modal').modal('hide');//隐藏modal
                $('.modal-backdrop').remove();//去掉遮罩层
                if (data == 1) {
                    $(obj).parent().parent().parent().parent().parent().parent().remove();
                } else {
                    alert("删除失败");
                }
            });
    }

    function update(pid) {
        location.assign("${pageContext.request.contextPath}/preUpdate/" + pid);
    }

    function demo(pid) {
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath }/getone.do",
            contentType: "application/json;charset=utf-8",
            data: '{"id":2,"pname":"测试商品","pprice":99.9}',
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>

</body>
</html>